import React, { Component } from 'react';
import axios from 'axios';
import {Radio} from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import {withRouter} from 'react-router-dom';
import './index.less';
import { timingSafeEqual } from 'crypto';
 class Product extends  Component{
    constructor(props){
        super(props);
        this.id = props.match.params.id
        this.onChange = this.onChange.bind(this);
        this.buy = this.buy.bind(this)
        this.getProductDetail = this.getProductDetail.bind(this)
        this.state={
            productDetailId:'',
            data:{
                properties:[]
            },
            propertyNumberId:[],
            youhui:0,
            cost:0
        }
    }
    onChange(e,k){
        this.state.propertyNumberId[k]= e.target.value;
        this.getProductDetail();
    }
    componentDidMount(){
        axios.get('http://cloud.jss.com.cn/order/product/getProduct.do?productId='+this.id+'&accountToken=&_=1530621085162').then((res)=>{
            if(res.data.result && res.data.result == 'success'){
                // 在数据里面标识状态
                let propertyNumberId =[];
                res.data.data.properties.forEach(element => {
                    let propertyNumberList = element.propertyNumberList;
                    element.defaultValue= propertyNumberList[0].property_number_id;
                    propertyNumberId.push(propertyNumberList[0].property_number_id)
                });
                this.state.propertyNumberId = propertyNumberId;
                this.getProductDetail();
                this.setState({
                    data:res.data.data
                })
                //获取当前价格
            }
        })
    }
    getProductDetail(){
        axios.get('http://cloud.jss.com.cn/order/product/getProductDetail.do',{
            params:{
                productId:this.id,
                propertyNumberIds:this.state.propertyNumberId.join(',')
            }
        }).then((res)=>{
            if(res.data.result && res.data.result == 'success'){
                this.setState({
                    cost:res.data.data.cost,
                    youhui:res.data.data.guide_price,
                    productDetailId:res.data.data.id
                })
            }
        })
    }
    buy(){
        if( this.state.productDetailId!=''){
            this.props.history.push('/buy/'+this.state.productDetailId);
        }
        else{
            return;
        }
    }
    render(){
        const radioStyle = {
            marginRight:'10px',
            height: '30px',
            lineHeight: '30px',
          };
        const buttonStyle='ui-button';
        return (
            <div>
            <div>商品明细</div>
            {
                this.state.data.properties.map((v,k)=>{
                    return (
                        <div key={k} className="e-mt10">
                            <RadioGroup onChange={(e)=>{this.onChange(e,k)}} key={k} defaultValue={v.defaultValue}>
                                {
                                    v.propertyNumberList.map((val,key)=>{
                                        return (
                                            <RadioButton value={val.property_number_id} key={key} style={radioStyle}>{val.property_number}{val.property_unit}</RadioButton>
                                        )
                                    })
                                }
                            </RadioGroup>
                        </div>
                    )
                  })
            }
            <div className="e-mt20">
            <p>原价：<span className="lineThrough">{this.state.cost}</span></p>
            <p>优惠价：<span>{this.state.youhui}元</span></p>
            <button onClick={this.buy} className={this.state.productDetailId==''?buttonStyle+' disabled':buttonStyle}>立即购买</button>
            </div>
            </div>
        )
    }
}
export default withRouter(Product);